/**
 * @Description:登录主入口
 * @author 云离
 * @date: 2018/12/28
 */
import React, { Component } from 'react'
import {Form, Row, Col, Input, Button, Select, DatePicker} from 'antd'
import PropTypes from "prop-types";
import locale from 'antd/es/date-picker/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

const { Option } = Select
const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
    },
};


class MyForm extends Component {

    static propTypes = {
        initForm: PropTypes.object.isRequired,
        items: PropTypes.array.isRequired,
        handleSearch: PropTypes.func.isRequired,
        submitText: PropTypes.string
    }

    handleSearch = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            this.props.handleSearch(values)
        });
    }

    handleReset = () => {
        this.props.form.resetFields();
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const {initForm, items} = this.props
        return (
            <div>
                <Form {...formItemLayout} onSubmit={this.handleSearch} style={{marginBottom: 10}}>
                    <Row gutter={10}>
                        {items.map(item => {
                            if (item.type === 'select') {
                                return (
                                    <Col span={6} key={item.key}>
                                        <Form.Item label={item.label}>
                                            {getFieldDecorator(item.key, {
                                                initialValue: initForm[item.key],
                                            })(
                                                <Select>
                                                    {item.options.map(option => <Option value={option.value} key={option.label}>{option.label}</Option>)}
                                                </Select>
                                            )}
                                        </Form.Item>
                                    </Col>
                                )
                            } else if (item.type === 'input') {
                                return (
                                    <Col span={6} key={item.key}>
                                        <Form.Item label={item.label}>
                                            {getFieldDecorator(item.key, {
                                                initialValue: initForm[item.key],
                                            })(
                                                <Input />
                                            )}
                                        </Form.Item>
                                    </Col>
                                )
                            } else if (item.type === 'DatePicker') {
                                return (
                                    <Col span={6} key={item.key}>
                                        <Form.Item label={item.label}>
                                            {getFieldDecorator(item.key, {
                                                initialValue: initForm[item.key],
                                            })(
                                                <DatePicker locale={locale} placeholder="" style={{width: '100%'}}/>
                                            )}
                                        </Form.Item>
                                    </Col>
                                )
                            }
                        })}
                        <Col span={6} style={{marginTop: 5}}>
                            <Button type="primary" htmlType="submit">
                                {this.props.submitText || '搜索'}
                            </Button>
                            <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
                                重置
                            </Button>
                        </Col>
                    </Row>
                </Form>
            </div>
        )
    }
}

export default Form.create()(MyForm)
